---
layout: api
title: "v2.0.1 JavaScript Library: L.Marker"
categories: api
version: v2.0.1
permalink: /api/v2.0.1/l-marker/
---
<h2 id="marker">Marker</h2>

<p>Used to put markers on the map.</p>

<pre><code class="javascript">L.marker([50.5, 30.5]).addTo(map);</code></pre>

<h3>Creation</h3>

<table data-id='marker'>
	<tr>
<th class="width200">Factory</th>

<th>Description</th>
	</tr>
	<tr>
<td><code><b>L.marker</b>(
<nobr>&lt;<a href="/mapbox.js/api/v2.0.1/l-latlng">LatLng</a>&gt; <i>latlng</i>,</nobr>
<nobr>&lt;<a href="/mapbox.js/api/v2.0.1/l-marker">Marker options</a>&gt; <i>options?</i> )</nobr>
</code></td>

<td>Instantiates a Marker object given a geographical point and optionally an options object.</td>
	</tr>
</table>

<h3 id="marker-options">Options</h3>

<table data-id='marker'>
	<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
	</tr>
	<tr>
<td><code><b>icon</b></code></td>
<td><code><a href="/mapbox.js/api/v2.0.1/l-icon">L.Icon</a></code></td>
<td>*</td>
<td>Icon class to use for rendering the marker. See <a href="/mapbox.js/api/v2.0.1/l-icon">Icon documentation</a> for details on how to customize the marker icon. Set to <code>new L.Icon.Default()</code> by default.</td>
	</tr>
	<tr>
<td><code><b>clickable</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="literal">true</span></code></td>
<td>If <code><span class="literal">false</span></code>, the marker will not emit mouse events and will act as a part of the underlying map.</td>
	</tr>
	<tr>
<td><code><b>draggable</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="literal">false</span></code></td>
<td>Whether the marker is draggable with mouse/touch or not.</td>
	</tr>
	<tr>
<td><code><b>keyboard</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="literal">true</span></code></td>
<td>Whether the marker can be tabbed to with a keyboard and clicked by pressing enter.</td>
	</tr>
	<tr>
<td><code><b>title</b></code></td>
<td><code>String</code></td>
<td><code><span class="string">''</span></code></td>
<td>Text for the browser tooltip that appear on marker hover (no tooltip by default).</td>
	</tr>
	<tr>
<td><code><b>alt</b></code></td>
<td><code>String</code></td>
<td><code><span class="string">''</span></code></td>
<td>Text for the <code>alt</code> attribute of the icon image (useful for accessibility).</td>
	</tr>
	<tr id="marker-zindexoffset">
<td><code><b>zIndexOffset</b></code></td>
<td><code>Number</code></td>
<td><code><span class="number">0</span></code></td>
<td>By default, marker images zIndex is set automatically based on its latitude. Use this option if you want to put the marker on top of all others (or below), specifying a high value like <code>1000</code> (or high negative value, respectively).</td>
	</tr>
	<tr>
<td><code><b>opacity</b></code></td>
<td><code>Number</code></td>
<td><code><span class="number">1.0</span></code></td>
<td>The opacity of the marker.</td>
	</tr>
	<tr>
<td><code><b>riseOnHover</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="literal">false</span></code></td>
<td>If <code><span class="literal">true</span></code>, the marker will get on top of others when you hover the mouse over it.</td>
	</tr>
	<tr>
<td><code><b>riseOffset</b></code></td>
<td><code>Number</code></td>
<td><code><span class="number">250</span></code></td>
<td>The z-index offset used for the <code>riseOnHover</code> feature.</td>
	</tr>
</table>

<h3>Events</h3>

<p>You can subscribe to the following events using <a href="/mapbox.js/api/v2.0.1/l-events">these methods</a>.</p>

<table data-id='marker'>
	<tr>
<th class="width100">Event</th>
<th class="width100">Data</th>
<th>Description</th>
	</tr>
	<tr>
<td><code><b>click</b></code></td>
<td><code><a href="/mapbox.js/api/v2.0.1/l-event-objects">MouseEvent</a></code></td>
<td>Fired when the user clicks (or taps) the marker.</td>
	</tr>
	<tr>
<td><code><b>dblclick</b></code></td>
<td><code><a href="/mapbox.js/api/v2.0.1/l-event-objects">MouseEvent</a></code></td>
<td>Fired when the user double-clicks (or double-taps) the marker.</td>
	</tr>
	<tr>
<td><code><b>mousedown</b></code></td>
<td><code><a href="/mapbox.js/api/v2.0.1/l-event-objects">MouseEvent</a></code></td>
<td>Fired when the user pushes the mouse button on the marker.</td>
	</tr>
	<tr>
<td><code><b>mouseover</b></code></td>
<td><code><a href="/mapbox.js/api/v2.0.1/l-event-objects">MouseEvent</a></code></td>
<td>Fired when the mouse enters the marker.</td>
	</tr>
	<tr>
<td><code><b>mouseout</b></code></td>
<td><code><a href="/mapbox.js/api/v2.0.1/l-event-objects">MouseEvent</a></code></td>
<td>Fired when the mouse leaves the marker.</td>
	</tr>
	<tr>
<td><code><b>contextmenu</b></code></td>
<td><code><a href="/mapbox.js/api/v2.0.1/l-event-objects">MouseEvent</a></code>
<td>Fired when the user right-clicks on the marker.</td>
	</tr>
	<tr>
<td><code><b>dragstart</b></code></td>
<td><code><a href="/mapbox.js/api/v2.0.1/l-event-objects">Event</a></code></td>
<td>Fired when the user starts dragging the marker.</td>
	</tr>
	<tr>
<td><code><b>drag</b></code></td>
<td><code><a href="/mapbox.js/api/v2.0.1/l-event-objects">Event</a></code></td>
<td>Fired repeatedly while the user drags the marker.</td>
	</tr>
	<tr>
<td><code><b>dragend</b></code></td>
<td><code><a href="/mapbox.js/api/v2.0.1/l-event-objects">DragEndEvent</a></code></td>
<td>Fired when the user stops dragging the marker.</td>
	</tr>
	<tr>
<td><code><b>move</b></code></td>
<td><code><a href="/mapbox.js/api/v2.0.1/l-event-objects">Event</a></code></td>
<td>Fired when the marker is moved via setLatLng. New coordinate include in event arguments.</td>
	</tr>
	<tr>
<td><code><b>add</b></code></td>
<td><code><a href="/mapbox.js/api/v2.0.1/l-event-objects">Event</a></code></td>
<td>Fired when the marker is added to the map.</td>
	</tr>
	<tr>
<td><code><b>remove</b></code></td>
<td><code><a href="/mapbox.js/api/v2.0.1/l-event-objects">Event</a></code></td>
<td>Fired when the marker is removed from the map.</td>
	</tr>
	<tr>
<td><code><b>popupopen</b></code></td>
<td><code><a href="/mapbox.js/api/v2.0.1/l-event-objects">PopupEvent</a></code></td>
<td>Fired when a popup bound to the marker is open.</td>
	</tr>
	<tr>
<td><code><b>popupclose</b></code></td>
<td><code><a href="/mapbox.js/api/v2.0.1/l-event-objects">PopupEvent</a></code></td>
<td>Fired when a popup bound to the marker is closed.</td>
	</tr>
</table>

<h3>Methods</h3>

<table data-id='marker'>
	<tr>
<th>Method</th>
<th>Returns</th>
<th>Description</th>
	</tr>
	<tr>
<td><code><b>addTo</b>(
<nobr>&lt;<a href="/mapbox.js/api/v2.0.1/l-map-class">Map</a>&gt; <i>map</i> )</nobr>
</code></td>

<td><code><span class="keyword">this</span></code></td>
<td>Adds the marker to the map.</td>
	</tr>
	<tr>
<td><code><b>getLatLng</b>()</code></td>
<td><code><a href="/mapbox.js/api/v2.0.1/l-latlng">LatLng</a></code></td>
<td>Returns the current geographical position of the marker.</td>
	</tr>
	<tr>
<td><code><b>setLatLng</b>(
<nobr>&lt;<a href="/mapbox.js/api/v2.0.1/l-latlng">LatLng</a>&gt; <i>latlng</i> )</nobr>
</code></td>

<td><code><span class="keyword">this</span></code></td>
<td>Changes the marker position to the given point.</td>
	</tr>
	<tr>
<td><code><b>setIcon</b>(
<nobr>&lt;<a href="/mapbox.js/api/v2.0.1/l-icon">Icon</a>&gt; <i>icon</i> )</nobr>
</code></td>

<td><code><span class="keyword">this</span></code></td>
<td>Changes the marker icon.</td>
	</tr>
	<tr>
<td><code><b>setZIndexOffset</b>(
<nobr>&lt;Number&gt; <i>offset</i> )</nobr>
</code></td>

<td><code><span class="keyword">this</span></code></td>
<td>Changes the <a href="/mapbox.js/api/v2.0.1/l-marker">zIndex offset</a> of the marker.</td>
	</tr>
	<tr>
<td><code><b>setOpacity</b>(
<nobr>&lt;Number&gt; <i>opacity</i> )</nobr>
</code></td>
<td><code><span class="keyword">this</span></code></td>
<td>Changes the opacity of the marker.</td>
	</tr>
	<tr>
<td><code><b>update</b>()</nobr>
</code></td>

<td><code><span class="keyword">this</span></code></td>
<td>Updates the marker position, useful if coordinates of its <code>latLng</code> object were changed directly.</td>
	</tr>
	<tr id="marker-bindpopup">
<td><code><b>bindPopup</b>(
<nobr>&lt;String&gt; <i>html</i> |</nobr> <nobr>&lt;HTMLElement&gt; <i>el</i> |</nobr> <nobr>&lt;<a href="/mapbox.js/api/v2.0.1/l-popup">Popup</a>&gt; <i>popup</i>,</nobr>
<nobr>&lt;<a href="/mapbox.js/api/v2.0.1/l-popup">Popup options</a>&gt; <i>options?</i> )</nobr>
</code></td>

<td><code><span class="keyword">this</span></code></td>
<td>Binds a popup with a particular HTML content to a click on this marker. You can also open the bound popup with the Marker <a href="/mapbox.js/api/v2.0.1/l-marker">openPopup</a> method.</td>
	</tr>
	<tr id="marker-unbindpopup">
<td><code><b>unbindPopup</b>()</code></td>
<td><code><span class="keyword">this</span></code></td>
<td>Unbinds the popup previously bound to the marker with <code>bindPopup</code>.</td>
	</tr>
	<tr id="marker-openpopup">
<td><code><b>openPopup</b>()</code></td>
<td><code><span class="keyword">this</span></code></td>
<td>Opens the popup previously bound by the <a href="/mapbox.js/api/v2.0.1/l-marker">bindPopup</a> method.</td>
	</tr>
	<tr>
<td><code><b>getPopup</b>()</code></td>
<td><code><a href="/mapbox.js/api/v2.0.1/l-popup">Popup</a></code></td>
<td>Returns the popup previously bound by the <a href="/mapbox.js/api/v2.0.1/l-marker">bindPopup</a> method.</td>
	</tr>
	<tr id="marker-closepopup">
<td><code><b>closePopup</b>()</code></td>
<td><code><span class="keyword">this</span></code></td>
<td>Closes the bound popup of the marker if it's opened.</td>
	</tr>
	<tr id="marker-togglepopup">
<td><code><b>togglePopup</b>()</code></td>
<td><code><span class="keyword">this</span></code></td>
<td>Toggles the popup previously bound by the <a href="/mapbox.js/api/v2.0.1/l-marker">bindPopup</a> method.</td>
	</tr>
	<tr id="marker-bindpopup">
<td><code><b>setPopupContent</b>(
<nobr>&lt;String&gt; <i>html</i> |</nobr> <nobr>&lt;HTMLElement&gt; <i>el</i>,</nobr>
<nobr>&lt;<a href="/mapbox.js/api/v2.0.1/l-popup">Popup options</a>&gt; <i>options?</i> )</nobr>
</code></td>

<td><code><span class="keyword">this</span></code></td>
<td>Sets an HTML content of the popup of this marker.</td>
	</tr>
	<tr id="marker-togeojson">
<td><code><b>toGeoJSON</b>()</code></td>
<td><code>Object</code></td>
<td>Returns a <a href="http://en.wikipedia.org/wiki/GeoJSON">GeoJSON</a> representation of the marker (GeoJSON Point Feature).</td>
	</tr>
</table>

<h3 id="marker-interaction-handlers">Interaction handlers</h3>

<p>Interaction handlers are properties of a marker instance that allow you to control interaction behavior in runtime, enabling or disabling certain features such as dragging (see <a href="/mapbox.js/api/v2.0.1/l-ihandler">IHandler</a> methods). Example:</p>

<pre><code class="javascript">marker.dragging.disable();</code></pre>

<table data-id='marker'>
	<tr>
<th class="width100">Property</th>
<th class="width100">Type</th>
<th>Description</th>
	</tr>
	<tr>
<td>dragging</td>
<td><a href="/mapbox.js/api/v2.0.1/l-ihandler"><code>IHandler</code></a></td>
<td>Marker dragging handler (by both mouse and touch).</td>
	</tr>
</table>


